<template>
  <el-header class='header-main' >
    <el-row v-bind:gutter='22'>
      <el-col v-bind:span='11'>
        <div class='header-logo'>
          <a href='#'>
            <img class='logo-img' src="../assets/logo.png" style='height: 40px'/>
          </a>
          <span style="font-size: 18px;font-weight: bold; color: #f0f0f0">蓉约出行官网后台管理系统</span>
        </div>
      </el-col>
      <el-col :span='11' class='header-right'>
        <div class='grid-content bg-purple header-right-main'>
          <el-dropdown >
            <span class='el-dropdown-link'>
              <label>切换主题</label>
               <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot='dropdown' >
              <el-dropdown-item @click.native='change("3a85ff")'>默认</el-dropdown-item>
              <!--<el-dropdown-item @click.native='change("purple")'> 紫色</el-dropdown-item>-->
              <!--<el-dropdown-item @click.native='change("20a0ff")'> 淡蓝色</el-dropdown-item>-->
              <el-dropdown-item @click.native='change("133959")'> 深蓝色</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown >
            <span class='el-dropdown-link'>
              <!--<img  class='user-img' src='../assets/avatar1_small.jpg'/>-->
              <label @click='re_basic'>{{username}}</label>
              <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot='dropdown'>
              <el-dropdown-item @click.native='fullscreen' v-if='screenfull'>全屏</el-dropdown-item>
              <el-dropdown-item @click.native='exitFullscreen' v-else>退出全屏</el-dropdown-item>
              <el-dropdown-item @click.native='loginOut'> 登出</el-dropdown-item>
             <!-- <el-dropdown-item @click.native='re_basic'>个人中心</el-dropdown-item>-->
            </el-dropdown-menu>
          </el-dropdown>

        </div>
      </el-col>
    </el-row>
  </el-header>

</template>
<script>
import { removeToken } from '@/store/getters';

export default {
  data () {
    return {
      screenfull: true,
      themecolor: '',
      screenWidth: document.body.clientWidth
    };
  },

  watch: {},
  methods: {
    //全屏
    fullscreen () {
      this.screenfull = false;
      var de = document.documentElement;
      if (de.requestFullscreen) {
        de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
      }
    },
    //退出全屏
    exitFullscreen () {
      this.screenfull = true;
      var de = document;
      if (de.exitFullscreen) {
        de.exitFullscreen();
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
      }
    },
    //退出
    loginOut () {
      removeToken();
      this.$router.push({
        path: '/'
      });
    },
    //切换主题
    toggleClass (element, className) {
      if (!element || !className) {
        return;
      }
      element.className = className;
    },
    change (e) {
      this.themecolor = e;
      this.toggleClass(document.body, 'custom-' + this.themecolor);
    },
    re_basic () {
      this.$router.push({ path: '/home/person' });
    }
  },
  mounted: function () {
    this.themecolor = '3a85ff';
    this.toggleClass(document.body, 'custom-' + this.themecolor);
    var that = this;
    window.onresize = () => {
      if (!checkFull()) {
        that.screenfull = true;
      }
    };
    function checkFull () {
      var isFull =
        document.fullscreenEnabled ||
        window.fullScreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) isFull = false;
      return isFull;
    }
  },
  created: function () {
    var username = localStorage.getItem('username');
    this.username = username;
  }
};
</script>
